<template>
  <Bar></Bar>
  <div class="container">
    <h2>绿色点是起点</h2>
    <h4>教室:  {{ userStore.classroom }} 入口: {{ userStore.entry }}</h4>
    <div class="map-container" ref="mapContainer">
      <!-- 底层地图图片 -->
      <img 
        :src="imgsrc"
        alt="地图底图" 
        class="base-map"
        ref="mapimg"
        @load="getscale"
      >
      
      <!-- 上层 SVG 覆盖层 -->
      <svg 
        class="overlay-svg" 
        :width="imageSize.width" 
        :height="imageSize.height"
      >
        <!-- 绘制路径 -->
        <path 
          v-if="pathPoints.length > 1"
          :d="generatePath(pathPoints)"
          stroke="blue"
          stroke-width="4"
          fill="none"
        />
        <!-- 绘制标记点 -->
        <circle
          v-for="(point, index) in pathPoints"
          :key="index"
          :cx="point.x"
          :cy="point.y"
          :r="index === 0 ? '3' : index === pathPoints.length-1 ? '3' : '3'"
          :fill="index === 0 ? 'green' : index === pathPoints.length-1 ? 'red' : 'orange'"
          @click.stop="removePoint(index)"
        />
      </svg>
    </div>
  
  </div>
  <template v-if="needDouble">
      <h1>进入楼梯的路</h1>
      
      <img 
        src="../assets/F4N_floor.jpg"
        alt="地图" 
        class="base-map"
      >
      
    </template>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import Bar from './Bar.vue'
import { useUserStore } from '../stores/Aim';
import {northRoom , allRoom ,Points, getEntry , getImg} from '../stores/inDoorData';

const userStore = useUserStore();

const imgsrc = computed(()=>getImg(userStore.classroom))

const mapimg = ref(null)

const imageSize = ref({ width: 1800, height: 400 }); // 图片尺寸

const scalex = ref(1)
const scaley = ref(1)
// 存储路径点
const pathPoints = ref([]);
// const needDouble = ref(true)
const needDouble = computed(()=>parseInt(userStore.classroom/100) == 5 && northRoom.has(userStore.classroom))

const staticPath = ref('M 250 70 L 270 70 L 270 145 L 750 145 L 750 100')//北楼4楼楼梯

const getscale = ()=>{
  console.log("img")
  imageSize.value = {
    width: mapimg.value.clientX,
    height: mapimg.value.clientY
  }
  scalex.value = mapimg.value.clientWidth/mapimg.value.naturalWidth
  scaley.value = mapimg.value.clientHeight/mapimg.value.naturalHeight
  console.log("sx ",scalex.value,"sy ",scaley.value)
  getPath()
}

const scaling = (origin)=>{
  let x = parseInt(origin.x * scalex.value),y=parseInt(origin.y * scaley.value)
  return {
    x:x,
    y:y
  }
}

const getPath = ()=>{
  pathPoints.value.push(scaling(Points.get(userStore.entry+String(parseInt(userStore.classroom/100)))))//start

  let roomPoint = Points.get(userStore.classroom)
  roomPoint = scaling(roomPoint)

  if(!northRoom.has(userStore.classroom)){  

    pathPoints.value.push({
      x:roomPoint.x,
      y:pathPoints.value[0].y
    })
    pathPoints.value.push(roomPoint)

  }else{
    let middle = scaling(Points.get(
        userStore.entry+String(parseInt(userStore.classroom/100))+'1'
      ))
    
    pathPoints.value.push({
      x:middle.x, y:pathPoints.value[0].y
    });
    pathPoints.value.push(middle);
    pathPoints.value.push({
      x:roomPoint.x, y:middle.y
    })
    pathPoints.value.push(roomPoint)
  }
}


onMounted(()=>{
  //get path
  console.log("onmount")
})
// 点击图片添加路径点
const handleMapClick = (event) => {
  const rect = event.target.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  pathPoints.value.push({ x, y });
  console.log("x ",x,"y ",y)
};

// 生成 SVG path 的 d 属性
const generatePath = (points) => {
  return points.map((p, i) => 
    `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`
  ).join(' ');
};

// 移除指定点
const removePoint = (index) => {
  pathPoints.value.splice(index, 1);
};


</script>

<style scoped>
.container {
  max-width: 100%; 
  margin: 0;
  padding: 20px;
  height: 100vh; /* 使用视口高度作为容器高度 */
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
}

.map-container {
  position: relative;
  flex-grow: 1; 
  border: 1px solid #ccc;
  margin-bottom: 10px;
  width: 100%; /* 确保宽度填满 */
  min-height: 0; /* 修复flex容器中的溢出问题 */
  /* max-height: 450px; */
}

.base-map {
  display: block;
  width: 100%; /* 改为100%填满容器 */

  object-fit: contain; /* 保持图片比例 */
}

.overlay-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 确保SVG覆盖整个图片 */
  height: 100%;
  pointer-events: none;
}

/* 其余样式保持不变 */
.overlay-svg circle {
  pointer-events: auto;
  cursor: pointer;
}

.controls {
  margin-top: 10px;
  flex-shrink: 0; /* 防止控制区域被压缩 */
}

button {
  padding: 5px 10px;
  margin-right: 10px;
}
</style>
